import React, { useRef } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import type { ProFormInstance } from '@ant-design/pro-form';
import ProForm, { ModalForm, ProFormText, ProFormSelect } from '@ant-design/pro-form';
import type { ActionType } from '@ant-design/pro-table';
import { PlusOutlined } from '@ant-design/icons';
import { Button, message } from 'antd';
import type { TableProps } from './constant';
import { selectUsingPOST3, insertUsingPOST2, updateUsingPOST2} from '@/services/test/User';
import type { ProColumns } from '@ant-design/pro-table';
import { deleteUsingPOST2 } from '@/services/test/User';

const Index: React.FC = () => {
  const actionRef = useRef<ActionType>();
  const restFormRef = useRef<ProFormInstance>();

  const getTableList = async (params: any) => {
    const res = await selectUsingPOST3({ ...params });
    return res;
  };

  const onDelete = async (values: any) => {
    console.log(values);
    await deleteUsingPOST2({ id: values });
    actionRef.current?.reload();
    message.success('删除成功');
  };

  const getColumns: ProColumns<TableProps>[] = [
    {
      dataIndex: 'index',
      valueType: 'indexBorder',
      width: 48,
    },
    {
      title: '用户名',
      dataIndex: 'username',
    },
    {
      title: '姓名',
      dataIndex: 'name',
    },
    {
      title: '密码',
      dataIndex: 'password',
      search: false,
    },
    {
      title: '电话',
      dataIndex: 'phone',
    },
    {
      title: '性别',
      dataIndex: 'sex',
      search: false,
    },
    {
      title: '身份证号',
      dataIndex: 'identityNum',
    },
    {
      title: '创建时间',
      key: 'showTime',
      dataIndex: 'utcCreate',
      valueType: 'dateTime',
      // sorter: true,
      hideInSearch: true,
    },
    {
      title: '操作',
      valueType: 'option',
      render: (text, record, _, action) => [
        // <a
        //   key="editable"
        //   onClick={() => {
        //     action?.startEditable?.(record.id);
        //   }}
        // >
        //   编辑
        // </a>,
        <a target="_blank" rel="noopener noreferrer" key="view" onClick={() => onDelete(record.id)}>
          删除
        </a>,
      ],
    },
  ];

  const onAdd = async (values: any) => {
    await insertUsingPOST2(values).then(() => {
      actionRef.current?.reload();
      restFormRef.current?.resetFields();
      message.success('提交成功');
      return true;
    });
  };
  // const saveRecord = async (values: any) => {
  //   await updateUsingPOST2(values).then(() => {
  //     actionRef.current?.reload();
  //     restFormRef.current?.resetFields();
  //     message.success('修改成功');
  //     return true;
  //   });
  return (
    <>
      <PageContainer content={'该页面用于管理后台管理系统的账号属性'}>
        <ProTable<TableProps>
          columns={getColumns}
          actionRef={actionRef}
          request={getTableList}
          // editable={{
          //   type: 'multiple',
          //   onSave={saveRecord}
          // }}
          columnsState={{
            persistenceKey: 'pro-table-singe-demos',
            persistenceType: 'localStorage',
          }}
          rowKey="id"
          search={{
            labelWidth: 'auto',
          }}
          pagination={{
            pageSize: 10,
          }}
          onColumnsStateChange={() => actionRef.current?.reload()}
          dateFormatter="string"
          headerTitle="用户列表"
          toolBarRender={() => [
            <>
              <ModalForm<API.User>
                title="新建"
                trigger={
                  <Button type="primary">
                    <PlusOutlined />
                    新建
                  </Button>
                }
                autoFocusFirstInput
                onFinish={onAdd}
                formRef={restFormRef}
              >
                <ProForm.Group>
                  <ProFormText
                    width="md"
                    name="username"
                    label="用户名"
                    placeholder="请输入名称"
                    rules={[{ required: true, message: '这是必填项' }]}
                  />

                  <ProFormText
                    width="md"
                    name="name"
                    label="姓名"
                    tooltip="请输入真实姓名"
                    placeholder="请输入姓名"
                    rules={[{ required: true, message: '这是必填项' }]}
                  />
                </ProForm.Group>
                <ProForm.Group>
                  <ProFormText
                    width="md"
                    name="password"
                    label="密码"
                    placeholder="请输入密码"
                    rules={[{ required: true, message: '这是必填项' }]}
                  />
                  <ProFormText
                    width="md"
                    name="phone"
                    label="电话号码"
                    placeholder="请输入电话号码"
                  />
                </ProForm.Group>
                <ProForm.Group>
                  <ProFormText
                    width="md"
                    name="identityNum"
                    label="身份证号"
                    placeholder="请输入身份证号码"
                  />
                  <ProFormSelect
                    request={async () => [
                      {
                        value: '男',
                        label: '男',
                      },
                      {
                        value: '女',
                        label: '女',
                      },
                    ]}
                    width="xs"
                    name="sex"
                    label="性别"
                  />
                  <ProFormSelect
                    tooltip="管理员为最高权限，请谨慎选择"
                    request={async () => [
                      {
                        value: 'user',
                        label: '用户',
                      },
                      {
                        value: 'admin',
                        label: '管理员',
                      },
                    ]}
                    width="sm"
                    name="access"
                    label="角色"
                    rules={[{ required: true, message: '请选择角色权限' }]}
                  />
                </ProForm.Group>
              </ModalForm>
            </>,
          ]}
        />
      </PageContainer>
    </>
  );
};

export default Index;
